<template>
  <div id="md-shared-sidebar-component" :class="[isCollapse ? 'md-shared-sidebar-collapse' : '',sidebarToggle?'md-shared-sidebar-open':'md-shared-sidebar-hide']">
    <el-menu :background-color="$store.state.mdShared.sidebarBgColor" text-color="#fff" active-text-color="#ffd04b" :defaultActive="defaultActive" :collapse="isCollapse" router uniqueOpened>
      <el-menu-item index="0" @click="$router.push('/')">
        <i class="el-icon-s-platform"></i>
        <span slot="title">控制面板</span>
      </el-menu-item>
      <template v-for="item in menus">
        <el-menu-item :key="`${item.path}_${item.menuId}`" v-if="!item.children" :index="`${item.path}_${item.menuId}`">
          <md-icon :name="item.icon" v-if="item.icon" :size="iconSize" />
          <span slot="title">{{item.menuName}}</span>
        </el-menu-item>

        <el-submenu :key="`${item.path}_${item.menuId}`" v-if="item.children && item.children.length>0" :index="`${item.path}_${item.menuId}`">
          <template slot="title">
            <md-icon :name="item.icon" v-if="item.icon" :size="iconSize" />
            <span>{{item.menuName}}</span>
          </template>
          <el-menu-item v-for="sub in item.children" :key="sub.component" :index="`/${item.path}/${sub.path}`">
            <md-icon :name="sub.icon" v-if="sub.icon" :size="iconSize" />
            {{sub.menuName}}
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'MdSharedSidebarComponent',
  props: ['menus'],
  data () {
    return {
      defaultActive: null, // 选中路由
      iconSize: '18px' // 菜单图标大小
    }
  },
  computed: {
    isCollapse () {
      return this.$store.state.mdShared.isCollapse
    },
    sidebarToggle () {
      return this.$store.state.mdShared.sidebarToggle
    },
    leftMenus () {
      return this.$store.state.mdShared.leftMenus
    }
  },
  watch: {
    $route: {
      handler (route) {
        this.handleSetDefaultActive(route)
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.handleSetDefaultActive(this.$route)
  },
  methods: {
    /** 设置当前路由 */
    handleSetDefaultActive (route) {
      const nowPath = route.meta.parentPath ? route.meta.parentPath : route.meta.path
      this.defaultActive = nowPath
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
  },
};
</script>

<style lang="less" scoped>
#md-shared-sidebar-component {
  width: @md-shared-sidebar-width;
  min-width: @md-shared-sidebar-width;
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  .scroll-bar(5px, 10px);
  background-color: @md-shared-sidebar-bg;
  transition: all @md-shared-sidebar-duration;

  &.md-shared-sidebar-collapse {
    transition: width @md-shared-sidebar-duration;
    -moz-transition: width @md-shared-sidebar-duration;
    -webkit-transition: width @md-shared-sidebar-duration;
    -o-transition: width @md-shared-sidebar-duration;
    width: @md-shared-sidebar-min-width;
    min-width: @md-shared-sidebar-min-width;
  }

  ::v-deep .el-menu {
    width: 100% !important;
    border-right: none !important;

    .el-submenu__title {
      display: flex;
      align-items: center;
      .md-icon-base {
        display: block !important;
        margin-right: 8px;
      }
    }

    .el-menu-item {
      display: flex;
      align-items: center;
      .md-icon-base {
        display: block !important;
        margin-right: 8px;
      }
    }
  }
}

@media (max-width: 768px) {
  #md-shared-sidebar-component {
    -webkit-transform: translate(-(@md-shared-sidebar-width), 0);
    -ms-transform: translate(-(@md-shared-sidebar-width), 0);
    -o-transform: translate(-(@md-shared-sidebar-width), 0);
    transform: translate(-(@md-shared-sidebar-width), 0);
    margin-left: -(@md-shared-sidebar-width);

    &.md-shared-sidebar-open {
      -webkit-transform: translate(0px, 0);
      -ms-transform: translate(0px, 0);
      -o-transform: translate(0px, 0);
      transform: translate(0px, 0);
      margin-left: 0px;
    }
  }
}
</style>